<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>章节细纲 - AI网文小说创作助手</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <link href="mobile-common.css" rel="stylesheet">
</head>
<body>
    <div class="mobile-container">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="status-bar-left">
                <span class="status-bar-time">9:41</span>
            </div>
            <div class="status-bar-right">
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi ml-2"></i>
                <i class="fas fa-battery-full ml-2 status-bar-battery"></i>
            </div>
        </div>
        
        <!-- 导航栏 -->
        <div class="nav-bar">
            <div class="nav-left">
                <a href="chapter-outline.html">
                    <i class="fas fa-chevron-left"></i>
                </a>
            </div>
            <div class="nav-title">章节细纲</div>
            <div class="nav-right"></div>
        </div>
        
        <!-- 内容区域 -->
        <div class="content">
            <!-- 步骤指示器 -->
            <div class="mb-4">
                <div class="flex items-center justify-between">
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full bg-success flex items-center justify-center text-white">
                            <i class="fas fa-check"></i>
                        </div>
                        <span class="text-xs mt-1 text-success font-semibold">选择流派</span>
                    </div>
                    <div class="flex-1 h-1 bg-success mx-2"></div>
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full bg-success flex items-center justify-center text-white">
                            <i class="fas fa-check"></i>
                        </div>
                        <span class="text-xs mt-1 text-success font-semibold">输入梗概</span>
                    </div>
                    <div class="flex-1 h-1 bg-success mx-2"></div>
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full bg-success flex items-center justify-center text-white">
                            <i class="fas fa-check"></i>
                        </div>
                        <span class="text-xs mt-1 text-success font-semibold">故事要素</span>
                    </div>
                    <div class="flex-1 h-1 bg-success mx-2"></div>
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full bg-success flex items-center justify-center text-white">
                            <i class="fas fa-check"></i>
                        </div>
                        <span class="text-xs mt-1 text-success font-semibold">章节大纲</span>
                    </div>
                    <div class="flex-1 h-1 bg-gray-200 mx-2 relative">
                        <div class="absolute top-0 left-0 h-1 bg-primary" style="width: 50%"></div>
                    </div>
                    <div class="flex flex-col items-center">
                        <div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center text-white">
                            <span>5</span>
                        </div>
                        <span class="text-xs mt-1 text-primary font-semibold">章节细纲</span>
                    </div>
                </div>
            </div>
            
            <!-- 当前创作信息 -->
            <div class="card mb-4">
                <div class="p-4">
                    <div class="flex items-center mb-3">
                        <span class="badge badge-primary mr-2">男频</span>
                        <span class="font-bold">都市-异能流</span>
                    </div>
                    <div class="text-sm text-secondary">
                        <p class="line-clamp-3">大学生李天阳在一次偶然的机会下获得了一个神秘的系统，可以看到他人的情感值。从此，他的生活发生了翻天覆地的变化，不仅能够轻松应对各种人际关系，还能在危机时刻洞察他人的真实想法。在都市中游刃有余的同时，他逐渐发现这个系统背后隐藏着更大的秘密...</p>
                    </div>
                </div>
            </div>
            
            <!-- 章节细纲内容 -->
            <div class="mb-4">
                <h2 class="text-lg font-bold mb-3">章节细纲设置</h2>
                <p class="text-sm text-secondary mb-4">
                    此页面将在下一步实现，目前仅作为占位页面。
                </p>
            </div>
            
            <!-- 操作按钮 -->
            <div class="fixed bottom-24 left-0 right-0 p-4 bg-white border-t">
                <div class="flex justify-between">
                    <button class="btn btn-outline w-5/12" onclick="window.location.href='chapter-outline.html'">
                        <i class="fas fa-arrow-left mr-2"></i> 上一步
                    </button>
                    <button id="next-button" class="btn btn-primary w-5/12" onclick="alert('章节细纲功能将在下一步实现')">
                        下一步 <i class="fas fa-arrow-right ml-2"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 底部标签栏 -->
        <div class="tab-bar">
            <a href="home.html" class="tab-item" data-tab="home">
                <i class="fas fa-home tab-icon"></i>
                <span>首页</span>
            </a>
            <a href="novel-list.html" class="tab-item" data-tab="novels">
                <i class="fas fa-book tab-icon"></i>
                <span>我的小说</span>
            </a>
            <a href="create.html" class="tab-item active" data-tab="create">
                <i class="fas fa-plus-circle tab-icon"></i>
                <span>创作</span>
            </a>
            <a href="inspiration.html" class="tab-item" data-tab="inspiration">
                <i class="fas fa-lightbulb tab-icon"></i>
                <span>灵感</span>
            </a>
            <a href="profile.html" class="tab-item" data-tab="profile">
                <i class="fas fa-user tab-icon"></i>
                <span>我的</span>
            </a>
        </div>
    </div>
    
    <script src="mobile-common.js"></script>
</body>
</html> 